<template>
    <el-dialog
            v-model="dialogShow"
            :close-on-click-modal="false"
            title="分配任务"
            width="600px"
            @closed="close"
    >

        <el-form
                ref="refForm"
                :model="formData"
                :rules="rule"
                class="demo-ruleForm"
                label-width="120px"
        >
            <el-form-item label="招商产品信息">
                <template v-if="datas">
                    <span>{{ getProductName(datas) }}</span>
                </template>
            </el-form-item>

<!--            <el-form-item label="规划直销地区">-->
<!--          <span>{{-->
<!--              datas.planDetail?.provinceName + "/" + datas.planDetail?.cityName + '/'-->
<!--            }}{{datas.planDetail?.streetName ? datas.planDetail?.areaName + "/" + datas.planDetail?.streetName : datas.planDetail?.areaName}}</span>-->
<!--            </el-form-item>-->

            <el-form-item label="跟进职员" prop="headId">
                <el-select
                        v-model="formData.headId"
                        placeholder="请选择职员"
                        multiple
                        style="width: 100%"
                        @change="headChange"
                >
                    <el-option
                            v-for="item in headOptions"
                            :key="item.id"
                            :label="item.realName"
                            :value="item.id"
                    />
                </el-select>
            </el-form-item>

            <el-form-item label="跟进期限" prop="dealTime">
                <date-picker
                        v-model:date="formData.dealTime"
                        :disabled-date="disabledDate"
                        placeholder="请选择跟进开发期限"
                        style="width: 100%"
                />
            </el-form-item>

        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button
                        class="border-btn"
                        size="small"
                        @click="close"
                >取消
                </el-button>
                <el-button
                        class="main-btn"
                        size="small"
                        type="primary"
                        @click="confirm"
                >确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
    import {crmStore} from "../../../../store";
    import {useRouter} from 'vue-router'
    import {defineAsyncComponent, defineComponent, getCurrentInstance, inject, onMounted, reactive, toRefs} from 'vue'

    export default defineComponent({
        name: 'altDirectDialog',
        emits: ['success'],
        components: {

        },
        setup(props, {emit}) {
            const router = useRouter()
            const currentInstance = getCurrentInstance()
            const api = inject('api')
            const rule = {
                headId: [
                    {required: true, message: '请选择职员', trigger: 'blur'}
                ],
                dealTime: [
                    {
                        type: 'date',
                        required: true,
                        message: '请选择跟进开发期限',
                        trigger: 'change',
                    },
                ],
            }
            var data = reactive({
                dialogShow: false,
                formData: {
                    saleTaskId:0,
                    planDetailId: 0, // 规划明细id
                    headId: [], // 跟进职员id
                    headName: '', // 跟进职员名称
                    productId: 0, // 产品id
                    heads:[]
                },
                headOptions: crmStore.getters['company/getHeadOptions'],
                datas: {},
                refForm: null,
            })

            const open = (item) => {
                data.datas = item
                data.formData.saleTaskId = item.id
                data.formData.productId = item.productId
                data.dialogShow = true
            }

            const confirm = () => {
                data.refForm.validate((value) => {
                    if (value) {

                        const a = {...data.formData}
                        a.saleTaskId = Number(a.saleTaskId)
                        a.planDetailId = Number(a.planDetailId)
                        a.productId = Number(a.productId)
                        a.headId = Number(a.headId)
                        a.allocationAgentInfo = [{dealTime : data.formData.dealTime}]

                        api.plan.ALLOCATION_AGENT_CREATE(a).then(res => {
                            if (!res.code) {
                                currentInstance.proxy.customMessage({type: 'success', message: '分配成功'})
                                emit('success')
                                close()
                            } else {
                                currentInstance.proxy.customMessage({type: 'error', message: res.msg})
                            }
                        })
                    }
                })
            }

            const close = () => {
                data.formData = {
                    saleTaskId:0,
                    planDetailId: 0, // 规划明细id
                    agentId: '', // 分配的代理商id
                    agentName: '',
                    headId: [], // 跟进职员id
                    headName: '', // 跟进职员名称
                    dealTime: '', // 分配的跟进开发期限
                    productId: 0, // 产品id
                    heads:[]
                }
                data.tableData = []
                data.dialogShow = false
            }


            const headChange = (val) => {
                // const index = data.headOptions.findIndex(a => a.id == val)
                // if (index != -1) {
                //     data.formData.headName = data.headOptions[index].realName
                // }

                data.formData.heads = []
                for (let i = 0; i < data.formData.headId.length; i++) {
                    const index = data.headOptions.findIndex(a => a.id == data.formData.headId[i])

                    if (index != -1){
                        let heads = {
                            headId:data.headOptions[index].id,
                            headName:data.headOptions[index].realName
                        }
                        data.formData.heads.push(heads)
                    }
                }
            }

            const disabledDate = (time) => {
                return !(time.getTime() > Date.now())
            }

            onMounted(() => {
            })

            return {
                ...toRefs(data),
                rule,

                confirm,
                close,
                open,
                disabledDate,
                headChange,
            }
        }
    })
</script>

<style scoped>

</style>
